<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid"%>

<rapid:override name="header-style">
	<style>
.entry-title {
	background: #f8f8f8;
}
</style>


	<style type="text/css">
ol {
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}

.commentslist ol li {
	clear: botd;
	border: 1px solid #F2F2F2;
	overflow: hidden;
	padding: 15px;
	margin-top: 20px;
}
.caonimatd{
		border:0px;
}
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
      margin: initial; 
     padding: initial; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
	<link rel="stylesheet" href="/plugin/layui/css/layui.css">
</rapid:override>


<rapid:override name="breadcrumb">
	<%--面包屑导航 start--%>
	<nav class="breadcrumb">
		<a class="crumbs" href="/"> <i class="fa fa-home"></i>首页
		</a> <i class="fa fa-angle-right"></i> 留言板 <i class="fa fa-angle-right"></i>
		正文
	</nav>
	<%--面包屑导航 end--%>
</rapid:override>


<rapid:override name="left">
	<%--博客主体-左侧文章正文 start--%>
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		<article class="post" style="min-height: 500px;">
			<header class="entry-header">
				<h1 class="entry-title">留言板</h1>
			</header>
			<!-- .entry-header -->
			<div class="entry-content">
		
				<div class="middle-message">
					<form class="message-liuyan" method="post" id="message-Form"
						action="/message/insert">
						<div style="height: 30px">
							<input type="text" name="email" placeholder="请输入邮箱">
						</div>
						<br />
						<div>
							<input type="text" name="name" placeholder="请输入姓名">
						</div>
						<br />
						<div style="height: 90px">
							<textarea rows="5" cols="87" name="liuyan"
								style="max-width: 720px; max-height: 74px; min-width: 720px; min-height: 74px;"
								placeholder="请输入留言内容……"></textarea>
						</div>
						<div>
							<div>
								<button class="layui-btn" lay-filter="demo1"
									type="submit">发表留言</button>
							</div>
						</div>
					</form>
				</div>
				<div class="commentslist">
					<ol id="idData">
						<c:forEach items="${MessageAll}" var="message">
							<li style="border-color: rgb(242, 242, 242);">
								<table border="0" style="width: 90%;">
									<tr>
										<td rowspan="2" style="width: 50px;" class="caonimatd">
											<img alt=""
											src="https://2.gravatar.com/avatar/e74b94bfb565051dadc5e95e0678f5d8?s=45&amp;d=monsterid&amp;r=g"
											srcset="https://2.gravatar.com/avatar/e74b94bfb565051dadc5e95e0678f5d8?s=90&amp;d=monsterid&amp;r=g 2x"
											class="avatar avatar-45 photo" height="50" widtd="50">
										</td>
										<td style="text-align: left; color: darkgray" class="caonimatd">${message.name }&emsp;${message.email }</td>
										<td rowspan="2" class="caonimatd"><h3><b># ${message.id }</b></h3></td>
									</tr>
									<tr>
										<td class="caonimatd" style="font-size: 16px;">&emsp;&emsp;&emsp;&emsp;${message.detail }</td>
									</tr>
								</table>
							</li>
						</c:forEach>
					</ol>
					<div class="page">
						
						<div id="barcon" name="barcon"></div>
				</div>
				</div>

				<br /> <br />

				<footer class="single-footer">
					<ul class="single-meta">
						<li class="r-hide"><a href="javascript:pr()" title="侧边栏">
								<i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i>
						</a></li>
					</ul>
					<ul id="fontsize">
						<li>A+</li>
					</ul>
				</footer>
				<!-- .entry-footer -->


				<div class="clear"></div>
			</div>
			<!-- .entry-content -->
		</article>
		<!-- #post --> </main>
		<!-- .site-main -->
	</div>
	<%--博客主体-左侧文章正文end--%>
</rapid:override>

<rapid:override name="footer-script">
		<script>
			window.onload=function (){
				goPage(1,5);
			}
				/**
				 * 分页函数
				 * pno--页数
				 * psize--每页显示记录数
				 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
				 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
				 **/
				function goPage(pno, psize) {
					var itable = document.getElementById("idData").getElementsByTagName("li");
					var num = itable.length; //表格所有行数(所有记录数)
					console.log(num);
					var totalPage = 0; //总页数
					var pageSize = psize; //每页显示行数
					//总共分几页 
					if (num / pageSize > parseInt(num / pageSize)) {
						totalPage = parseInt(num / pageSize) + 1;
					} else {
						totalPage = parseInt(num / pageSize);
					}
					var currentPage = pno; //当前页数
					var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行  31 
					var endRow = currentPage * pageSize; //结束显示的行   40
					endRow = (endRow > num) ? num : endRow;
					console.log(endRow);
					//遍历显示数据实现分页
					for (var i = 1; i < (num + 1); i++) {
						var irow = itable[i - 1];
						if (i >= startRow && i <= endRow) {
							irow.style.display = "block";
						} else {
							irow.style.display = "none";
						}
					}
					var pageEnd = document.getElementById("pageEnd");
					var tempStr = "";
					if (currentPage > 1) {
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</button>";
						// tempStr += "<a href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">上一页</button>";
						// tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
					} else {
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</button>";
						// tempStr += "首页";
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" >上一页</button>";
					}
					if (currentPage < totalPage) {
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页</button>";
						// tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</button>";
						// tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
					} else {
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" >下一页</button>";
						tempStr += "<button class=\"layui-btn\" lay-filter=\"demo1\" type=\"submit\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</button>";
					}
	
					document.getElementById("barcon").innerHTML = tempStr;
	
				}
			</script>
</rapid:override>

<%@ include file="../Public/framework.jsp"%>